<script lang="tsx">
import { layoutHook } from '@/hooks/layout'
export default defineComponent({
  setup() {
    const { title, links } = layoutHook()
    return () => (
      <div class={'header'}>
        <h2>{title.value}</h2>
        <div class={'links'}>
          {links.value.map(it => {
            return (
              <el-link type="primary" href={it.href} target="_blank">
                {it.title}
              </el-link>
            )
          })}
        </div>
      </div>
    )
  }
})
</script>

<style scoped lang="scss">
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0 20px;
  .links {
    font-size: 14px;
    > a {
      margin-left: 20px;
    }
  }
}
</style>
